<template lang="html">
  <div id="charts">
    <div id="hp1event" :style="{width:'100%',height:'100%'}"></div>
  </div>
</template>

<script>
import co from 'co'
import echarts from 'echarts'
import {HttpResetClass} from 'vue-client'
import * as Util from '../../../Util'

let getData = function * (self) {
  let load = new HttpResetClass()
  load.load('POST', 'rs/sql/Events', {data: {condition: self.condition}}, {resolveMsg: null, rejectMsg: null})
  .then((res) => {
    let data = []
    let arr = []
    for (var i = 0; i < res.data.length; i++) {
      arr[i] = res.data[i].name
      data[i] = res.data[i].value
    }
    self.set(arr, data)
  })
}
export default {
  title: 'events',
  data () {
    return {
      xc: '',
      condition: '1 = 1'
    }
  },
  methods: {
    set (arr, data) {
      this.xc = echarts.init(document.getElementById('hp1event'))
      this.xc.setOption({
        title: {
          text: '表故障类型',
          subtext: '数据查询'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['数量'],
          x: 'left',
          y: 'bottom'
       },
   toolbox: {
       show : true,
       feature : {
           dataView : {show: true, readOnly: false},
           magicType : {show: true, type: ['line', 'bar']},
           restore : {show: true},
           saveAsImage : {show: true}
       }
   },
   calculable : true,
   xAxis : [
       {
           type : 'category',
           data : arr
       }
   ],
   yAxis : [
       {
           type : 'value'
       }
   ],
   series : [
       {
           name:'数量',
           type:'bar',
           data:data,
           markPoint : {
               data : [
                   {type : 'max', name: '最大值'},
                   {type : 'min', name: '最小值'}
               ]
           },
           markLine : {
               data : [
                   {type : 'average', name: '平均值'}
               ]
           }
       }
   ]
     })
   },
   searchdata () {
     let getGen =getData(this)
     co(getGen)
   }
 },
 ready () {
  this.condition = `u.f_filiale = '${Util.f.f_fengongsi}'`
   this.searchdata()
 }

}
</script>
<style lang="css">
#charts div{
  height: auto;
}
</style>
